<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>起点</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/index.css" />
    <link rel="stylesheet" href="../../styles/icon/iconfont.css" />
    <style>
        .el-header, .el-footer {
            background-color: black;
            color: white;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            background-color: black;
            color: white;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .container {
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            background-color: #100c2a;
        }

        .previous {
            background-color: #8e8a9f;
            color: #decece;
        }

        .round {
            border-radius: 50%;
        }

    </style>
</head>

<body>
<div class="app" id="app">
    <el-col :span="1" style="height: 100%" class="container">
        <el-button type="info" class="previous round" onclick='location.href=("pingjuntui.html")'>&#8249;</el-button>
    </el-col>
    <el-col :span="22" style="height: 100%">
    <el-row :span="8" style="height: 50%">
        <el-col style="height: 100%" :span="12"><div style="height: 100%" class="grid-content bg-purple">
            <div ref="chart" style="width: 100%; height: 100%"></div>
        </div>
        </el-col>
        <el-col style="height: 100%" :span="12"><div style="height: 100%" class="grid-content bg-purple">
            <div ref="chart1" style="width: 100%; height: 100%"></div>
        </div></el-col>
    </el-row>
    <el-row :span="8" style="height: 50%">
        <el-col style="height: 100%" :span="12"><div style="height: 100%" class="grid-content bg-purple">
            <div ref="chart2" style="width: 100%; height: 100%"></div>
        </div></el-col>
        <el-col style="height: 100%" :span="12"><div style="height: 100%" class="grid-content bg-purple">
            <div ref="chart3" style="width: 100%; height: 100%"></div>
        </div></el-col>
    </el-row>
    </el-col>

    <el-col :span="1" style="height: 100%" class="container">
        <el-button type="info" class="previous round" onclick='location.href=("reward.html")'>&#8250;</el-button>
    </el-col>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/echarts.js"></script>
<script src="../../js/request.js"></script>
<script src="api/test.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                data1:{
                    name: [],
                    value:[],
                },
                data2:{
                    name: [],
                    value:[],
                },
                data3:{
                    title: [],
                    novelcount:[],
                    type:[],
                },
                data4:[]
            }
        },
        computed: {},
        created() {
            this.getNewList();
            this.getNewList1();
            this.getNewList2();
            this.getNewList3();
        },
        beforeDestroy() {
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart(this.data1);
                this.initChart1(this.data2);
                this.initChart2(this.data3);
                this.initChart3(this.data4);
            });
        },
        methods: {
            getNewList() {
                pingjuntui2().then((res) => {

                    if (res.code === 1) {
                        // console.log(res)
                        for (let i = 0; i < res.data.length; i++) {
                            this.data1.name[i] = res.data[i].name;
                            this.data1.value[i] = res.data[i].value;
                        }
                        console.log(this.data1)
                        console.log(res.data)
                        this.initChart(this.data1);
                    }

                })
            },
            getNewList1() {
                pingjuntui4().then((res) => {

                    if (res.code === 1) {
                        // console.log(res)
                        for (let i = 0; i < res.data.length; i++) {
                            this.data2.name[i] = res.data[i].name;
                            this.data2.value[i] = res.data[i].value;
                        }
                        console.log(this.data2)
                        console.log(res.data)
                        this.initChart1(this.data1);
                    }

                })
            },
            getNewList2() {
                radar2().then((res) => {

                    if (res.code === 1) {
                        // console.log(res)
                        for (let i = 0; i < res.data.length; i++) {
                            this.data3.title[i] = res.data[i].title;
                            this.data3.novelcount[i] = res.data[i].novelcount;
                            this.data3.type[i] = res.data[i].type;
                        }
                        console.log(this.data3)
                        this.initChart2(this.data3);
                    }

                })
            },
            getNewList3() {
                novelcount().then((res) => {

                    if(res.code===1){
                        console.log(res)
                        for (let i =0; i <res.data.length; i++) {
                            this.data4.push({value:res.data[i].novelcount,name:res.data[i].novelname})
                            // this.data1[i][value] = res.data[i].novelcount;
                            // this.data1[i].name = res.data[i].novelname
                        }
                        console.log(this.data4)
                        this.initChart3(this.data4);
                    }

                })
            },
            initChart(data1) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chart,'dark');
                var option = {
                    title: {
                        text:  "男生小说类型热度分析",
                        left: "center",
                        textStyle: {
                            fontSize:40
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.data1.name,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '男生小说类型热度分析',
                            type: 'bar',
                            barWidth: '60%',
                            data: this.data1.value,
                        }
                    ]
                };
                myChart.setOption(option);
                //图表大小变动从新渲染，动态自适应
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            initChart1(data2) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chart1,'dark');
                var option = {
                    title: {
                        text:  "男生各类型小说平均月票数分析",
                        left: "center",
                        textStyle: {
                            fontSize:40
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.data2.name,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '男生小说类型热度分析',
                            type: 'bar',
                            barWidth: '60%',
                            data: this.data2.value,
                        }
                    ]
                };
                myChart.setOption(option);
                //图表大小变动从新渲染，动态自适应
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            initChart2(data3) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chart2,'dark');
                var option = {
                    title: {
                        text: '男生各类型小说最高字数分析',
                        textStyle: {
                            fontSize:40,
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.data3.type
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: this.data3.novelcount,
                            type: 'line'
                        }
                    ]
                };
                myChart.setOption(option);
                //图表大小变动从新渲染，动态自适应
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            initChart3(data4) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chart3,'dark');
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '小说字数排行榜',
                        textStyle: {
                            fontSize:40,
                        },
                        x:"right",
                        y:"bottom",
                    },
                    tooltip: {
                        trigger: 'item',
                    },
                    toolbox: {
                        feature: {
                            dataView: { readOnly: false },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        data: this.data1.name,
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '小说字数排行榜',
                            type: 'funnel',
                            left: '10%',
                            top: 60,
                            bottom: 60,
                            width: '80%',
                            min: 0,
                            max: 50000000,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: 'descending',
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 20
                                }
                            },
                            data:this.data4
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
        },
    })
</script>
</body>
</html>
